import React, { Component, PureComponent } from 'react'

export default class Test extends PureComponent {
  state = {
    msg: '123',
    arr: [1, 2, 3],
  }
  //   shouldComponentUpdate(nextProps, nextState) {
  //     // 注意: 其他生命周期钩子函数中,this.props和this.state是最新的数据,但是在shouldComponentUpdate中this.props和this.state是上一次的旧的数据
  //     // 如果要获取新数据,通过形参接收
  //     // console.log(this.props)
  //     console.log(nextState, this.state)
  //     return (
  //       nextProps.xxx !== this.props.xxx ||
  //       nextState.msg !== this.state.msg ||
  //       nextState.arr.length !== this.state.arr.length
  //     )
  //   }
  render() {
    console.log('test组件更新了')
    return (
      <div>
        <button
          onClick={() => {
            this.setState({
              msg: 'hello smu',
            })
          }}
        >
          test按钮
        </button>
        <button
          onClick={() => {
            const newArr = [...this.state.arr]
            newArr.push(8)
            this.setState({
              arr: newArr,
            })
          }}
        >
          test按钮-修改数组
        </button>
        Test, {this.props.xxx}, {this.state.msg}
        <ul>
          {this.state.arr.map((item, index) => (
            <li key={index}>{item}</li>
          ))}
        </ul>
      </div>
    )
  }
}
